<template>
      <div class="timeSelect">
        <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="-"
        start-placeholder="Start date"
        end-placeholder="End date"
        :size="size"
        @blur="getTime"
      />
      </div>
</template>

<script setup lang="ts">
import { ref,watch } from 'vue'
import {useStore} from 'vuex'
let store = useStore()
 let props:any= defineProps({
  clears:{
    type:Boolean,
    default:false
  }
})
const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

let emits =   defineEmits(['getTimeV'])
const getTime = ()=>{
   
     emits('getTimeV',value1.value)
}


  //  监听用户操作父组件的 点击 重置， 2当用户点击 选择了时间 我也清空（vuex）
  watch(()=>props.clears,()=>{
    value1.value = ''
    
    
})
watch(()=>store.state.play.time,(new1,old2)=>{

    
        if(typeof(new1) ==typeof('555')){
          value1.value = ''
        } 
    
})
</script>

<style scoped lang="scss">
   .timeSelect{
    margin-left:10px;
   }
</style>